<template>
  <a-row :gutter="10">
    <a-col  :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item label="用户电话" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-input placeholder="请输入用户手机号"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="状态" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-select placeholder="请选择用户状态"> </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" style="margin: 10px 10px 14px 83px">
          <a-button type="primary" size="large" ghost>查询</a-button>
          <a-button type="primary" size="large" ghost>重置</a-button>
          <a-button type="primary" size="large" ghost>导出</a-button>
          <a-button type="primary" size="large" ghost>导入</a-button>
        </div>

        <div style="margin-top: 15px">
          <a-table
            style="height: 500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{ selectedRowKeys: selectedRowKeys1, onChange: onSelectChange1 }"
            @change="handleTableChange"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleOpen(record)">编辑</a>
              <a-divider type="vertical" />
              <a class="ant-dropdown-link">禁用</a>
            </span>
          </a-table>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'

export default {
  name: 'RoleUserList',
  mixins: [JeecgListMixin],
  components: {
    moment
  },
  data() {
    return {
      selectedRowKeys1: [],
      selectedRowKeys2: [],
      columns: [
        {
          title: '用户信息',
          align: 'center',
          dataIndex: 'roleCode'
        },
        {
          title: '所属部门',
          align: 'center',
          dataIndex: 'roleName'
        },
        {
          title: '角色',
          dataIndex: 'createTime',
          align: 'center',
          sorter: true
        },
        {
          title: '直属上级',
          align: 'center'
        },
        {
          title: '创建时间',
          align: 'center'
        },
        {
          title: '状态',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/sys/role/list',
        delete: '/sys/role/delete',
        list2: '/sys/user/userRoleList',
        addUserRole: '/sys/user/addSysUserRole',
        delete2: '/sys/user/deleteUserRole',
        deleteBatch2: '/sys/user/deleteUserRoleBatch',
        exportXlsUrl: 'sys/role/exportXls',
        importExcelUrl: 'sys/role/importExcel'
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    leftColMd() {
      return this.selectedRowKeys1.length === 0 ? 24 : 12
    },
    rightColMd() {
      return this.selectedRowKeys1.length === 0 ? 0 : 12
    }
  },
  methods: {
    onSelectChange1(selectedRowKeys, selectionRows) {},
    onClearSelected() {},
    handleOpen(record) {}
  }
}
</script>
<style scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}
</style>
